<!-- subpkg_consult/order_list/components/order-list.vue -->
<script lang="ts" setup>
  import { orderListApi } from '@/apis/order'
  import type { OrderListData, OrderListItem } from '@/types/order'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, watch } from 'vue'

  const props = defineProps<{
    type: number
  }>()

  watch(
    () => props.type,
    () => {
      console.log(props)
      getOrderList()
    }
  )

  const loadType = ref('loading')

  const orderList = ref<OrderListItem[]>([])

  const statusMap = ['', '', 'color-2', 'color-1', 'color-3']

  const pageNum = ref(0)
  const pageTotal = ref(0)
  const refresherTriggered = ref(false)

  const getOrderList = async () => {
    loadType.value = 'loading'
    pageNum.value = 1
    orderList.value = []
    refresherTriggered.value = true
    const res = await orderListApi({
      type: props.type.toString(),
    })
    refresherTriggered.value = false
    orderList.value = res.rows
    pageTotal.value = res.pageTotal
    loadType.value = 'noMore'
    console.log(res)
  }

  const getMoreOrderList = async () => {
    loadType.value = 'loading'
    if (pageTotal.value > pageNum.value) {
      pageNum.value++
    } else {
      uni.showToast({
        title: '没有更多数据了',
        icon: 'none',
      })
      loadType.value = 'noMore'
      return
    }
    const res = await orderListApi({
      type: props.type.toString(),
      current: (pageNum.value + 1).toString(),
    })
    orderList.value.push(...res.rows)
    loadType.value = 'noMore'
  }

  onLoad(() => {
    getOrderList()
  })
</script>

<template>
  <scroll-view
    refresher-enabled
    :refresher-triggered="refresherTriggered"
    refresher-background="#FFFFFF"
    class="uni-scroll-view"
    scroll-y
    @scrolltolower="getMoreOrderList"
    @refresherrefresh="getOrderList"
  >
    <view class="consult-list">
      <view class="consult-list-item" v-for="item in orderList" :key="item.id">
        <view class="consult-header">
          <view class="label">
            <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
            <text>极速问诊（自动分配医生）</text>
          </view>
          <text :class="`status ${statusMap[item.status]}`">{{ item.statusValue }}</text>
        </view>

        <navigator
          class="consult-body"
          hover-class="none"
          :url="`/subpkg_consult/order_detail/order_detail?orderId=${item.id}`"
        >
          <uni-list :border="false">
            <uni-list-item :border="false" title="病情描述" :right-text="item.illnessDesc" />
            <uni-list-item :border="false" title="价格" :right-text="`¥ ${item.payment}`" />
            <uni-list-item :border="false" title="创建时间" :right-text="item.createTime" />
          </uni-list>
        </navigator>

        <view class="consult-footer">
          <button class="uni-button minor">取消订单</button>
          <button class="uni-button">继续支付</button>
        </view>
      </view>

      <!-- 加载状态 -->
      <uni-load-more
        :status="loadType"
        color="#C3C3C5"
        :icon-size="16"
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '数据正在加载中',
          contentnomore: '没有更多数据了',
        }"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './order-list.scss';
</style>
